<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader class="product_tabs" title="云直播间账号审核" hidden-breadcrumb></PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <!-- <Form ref="tableFrom" :model="tableFrom"  :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
                <Row type="flex" :gutter="24">

                    <Col v-bind="grid">
                        <FormItem label="手机号搜索：" label-for="title">
                            <Input search enter-button placeholder="请输入手机号" v-model="tableFrom.phone" @on-search="userSearchs"/>
                        </FormItem>
                    </Col>
                    <Button class="ml10" @click="exports">导出</Button>
                </Row>
            </Form> -->
            <Table :columns="columns" :data="tableList">
                <template slot-scope="{ row, index }" slot="status_text">
                    <span style="color: blue;" v-if="row.status == -1">{{ row.status_text }}</span>
                    <span style="color: green;" v-if="row.status == 1">{{ row.status_text }}</span>
                    <span style="color: red;"  v-if="row.status == 2">{{ row.status_text }}</span>
                </template>
                <template slot-scope="{ row, index }" slot="setUp">
                    <!-- <Divider type="vertical" /> -->
                    <a @click="audit(row)" v-if="row.status != 2">审核</a>
                </template>
            </Table>
            <div class="acea-row row-right page">
                <Page
                  :total="page.total"
                  :current="page.pageNum"
                  show-elevator
                  show-total
                  @on-change="pageChange"
                  :page-size="page.pageSize"
                  @on-page-size-change="limitChange"
                  show-sizer
                  />
            </div>
        </Card>
        <Modal
        v-model="modals"
        scrollable
        footer-hide
        closable
        title="咨询列表"
        :mask-closable="false"
        width="500"
      >
            <div class="danxuan">
                <div class="xuan">
                    <label>
                        <input type="radio" v-model="selectedValue" :value="1" /> 通过
                    </label>
                </div>
                <div class="xuan">
                    <label>
                        <input type="radio" v-model="selectedValue" :value="2" /> 拒绝
                    </label>
                </div>
            </div>
            <div>
                <Form ref="tableFrom" :model="tableFrom"  :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
                    <Col v-bind="grid" v-if="selectedValue == 1">
                        <FormItem label="关联咨询：">
                            <Select class="kuangao" placeholder="请选择" clearable v-model="consultId" @on-change="userIndex">
                                <Option v-for="item in optionList" :key="item.id" :value="item.id">{{ item.xm }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col v-bind="grid" v-if="selectedValue == 2">
                        <FormItem label="备注：">
                            <textarea  class="selectekuang" placeholder="请在此输入内容" v-model="textAreaValue"></textarea>
                        </FormItem>
                    </Col>
                </Form>
            </div>
            <div class="anniu">
                <div class="nante cor1" @click="quxiao">取消</div>
                <div class="nante cor2" @click="queding">确定</div>
            </div>
      </Modal>
    </div>
  </template>

  <script>
    import { mapState } from 'vuex';
    import { saleAuditlist, selectList, applyHandle } from '@/api/broadcast';
    import { cardPackUser } from "@/api/order";
    export default {
        name: 'audit',
        data () {
            return {
                columns: [
                    {
                        title: 'ID',
                        key: 'id',
                        width: 80
                    },
                    {
                        title: 'UID',
                        key: 'uid',
                        width: 80
                    },
                    {
                        title: '姓名',
                        key: 'real_name',
                        minWidth: 100
                    },
                    {
                        title: '联系电话',
                        key: 'phone',
                        minWidth: 100
                    },
                    {
                        title: '岗位',
                        key: 'role_text',
                        minWidth: 150
                    },
                    {
                        title: '审核状态',
                        slot: 'status_text',
                        minWidth: 100
                    },
                    {
                        title: '备注',
                        key: 'remark',
                        minWidth: 120
                    },
                    {
                        title: '设置',
                        slot: 'setUp',
                        minWidth: 150
                    }
                ],
                tableList: [],
                receiveList: [],
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                tableFrom: {
                    status: '',
                    title: '',
                },
                page: {
                      total: 0, // 总条数
                      pageNum: 1, // 当前页
                      pageSize: 10, // 每页显示条数
                  },
                total: 0,
                timeVal: [],
                modals: false,
                rowName:"",
                loading2: false,
                selectedValue: 1,
                consultId: null, // 初始可以设置为 null，等待用户选择
                optionList: [],
                textAreaValue:"",
                listId: "",
              }
          },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 90;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        created () {
            this.getList();
        },
        methods: {
            // 列表
            getList () {
                this.loading = true;
                // this.tableFrom.status = this.tableFrom.status || '';
                saleAuditlist({
                  page: this.page.pageNum,
                  limit: this.page.pageSize,
                }).then(async res => {
                    let data = res.data
                    this.tableList =  data.list;
                    this.page.total = data.count;
                    this.loading = false;
                }).catch(res => {
                    this.loading = false;
                    this.$Message.error(res.msg);
                })
            },
            getReceivelist(row) {
                selectList()
                .then(async (res) => {
                    let data = res.data;
                    if(row.role == 1){
                        this.optionList = data.consultants;
                    }else{
                        this.optionList = data.develop;
                    }
                })
                .catch((res) => {
                    this.$Message.error(res.msg);
                });
            },
            pageChange (index) {
                this.page.pageNum = index;
                this.getList();
            },
            limitChange(limit) {
              this.page.pageSize = limit;
              this.getList();
            },
            async exports() {
                let [th, filekey, data, fileName] = [[], [], [], ""];
                let excelData = JSON.parse(JSON.stringify(this.tableFrom));
                excelData.page = 1;
                excelData.product_id= this.$route.query.product_id || "";
                for (let i = 0; i < excelData.page + 1; i++) {
                    let lebData = await this.getExcelData(excelData);
                    if (!fileName) fileName = lebData.filename;
                    if (!filekey.length) {
                    filekey = lebData.filekey;
                    }
                    if (!th.length) th = lebData.header;
                    if (lebData.export.length) {
                        data = data.concat(lebData.export);
                        excelData.page++;
                    }
                }
                exportExcel(th, filekey, fileName, data);
            },
            getExcelData(excelData) {
                return new Promise((resolve, reject) => {
                    cardPackUser(excelData).then((res) => {
                    return resolve(res.data);
                    });
                });
            },
            // 审核
            audit (row) {
                this.listId = row.id
                this.modals = true;
                this.rowName = row;
                this.getReceivelist(row)
            },
            userSearchs () {
              this.page.pageNum = 1;
              this.getList();
            },
            userIndex(value){
                console.log('当前选中的关联咨询id为:', this.consultId);
            },
            quxiao(){
                this.modals = false;
            },
            queding(){
                let formData = {
                    status: this.selectedValue,
                    yg_id: this.consultId,
                    remark: this.textAreaValue
                }
                applyHandle(formData, this.listId)
                    .then((res) => {
                        this.$Message.success(res.msg);
                        this.modals = false;
                        this.getList();
                    })
                    .catch((err) => {
                        this.$Message.error(err.msg);
                    });
            }
        }
    }
  </script>

  <style scoped>
    .danxuan{
        display: flex;
        margin-left: 18px;
        margin-bottom: 30px;
    }
    .xuan{
        margin-right: 20px;
    }
    .kuangao{
        width: 200px;
    }
    .selectekuang{
        width: 200px;
        padding: 3px;
    }
    .anniu{
        display: flex;
        justify-content: center;

    }
    .nante{
        padding: 10px 40px;
        color: #fff;
        border-radius: 8px;
    }
    .cor1{
        background: #a3a2a2;
        margin-right: 50px;

    }
    .cor2{
        background: #2168aa;
    }
  </style>
